<template>
  <Dropdown placement="bottom-start" @on-click="handleFontStyle">
    <span class="font-style">样式</span>
    <template #list>
      <DropdownMenu>
        <DropdownItem name="fontWeight">
          <div class="text-align-item">
            <fontWeight
              :fill="baseAttr.fontWeight === 'bold' ? '#305ef4' : '#666'"
              width="14"
              height="14"
            />
            加粗
          </div>
        </DropdownItem>
        <DropdownItem name="fontStyle">
          <div class="text-align-item">
            <fontStyle
              :fill="baseAttr.fontStyle === 'italic' ? '#305ef4' : '#666'"
              width="14"
              height="14"
            ></fontStyle>
            斜体
          </div>
        </DropdownItem>
        <DropdownItem name="linethrough">
          <div class="text-align-item">
            <linethrough
              :fill="baseAttr.linethrough ? '#305ef4' : '#666'"
              width="14"
              height="14"
            ></linethrough>
            中划线
          </div>
        </DropdownItem>
        <DropdownItem name="underline">
          <div class="text-align-item">
            <underline
              :fill="baseAttr.underline ? '#305ef4' : '#666'"
              width="14"
              height="14"
            ></underline>
            下划线
          </div>
        </DropdownItem>
      </DropdownMenu>
    </template>
  </Dropdown>
</template>

<script setup name="fontStyle">
import useSelect from '@/hooks/select';

import fontWeight from '@/assets/icon/attribute/fontWeight.svg';
import fontStyle from '@/assets/icon/attribute/fontStyle.svg';
import linethrough from '@/assets/icon/attribute/linethrough.svg';
import underline from '@/assets/icon/attribute/underline.svg';

const { canvasEditor, isMatchType } = useSelect();
const update = getCurrentInstance();

// 属性值
const baseAttr = reactive({
  fontSize: 0,
  fontFamily: '',
  lineHeight: 0,
  charSpacing: 0,
  fontWeight: '',
  textBackgroundColor: '#fff',
  textAlign: '',
  fontStyle: '',
  underline: false,
  linethrough: false,
  overline: false,
});

// 属性获取
const getObjectAttr = (e) => {
  const activeObject = canvasEditor.canvas.getActiveObject();
  // 不是当前obj，跳过
  if (e && e.target && e.target !== activeObject) return;
  if (activeObject && isMatchType) {
    baseAttr.fontSize = activeObject.get('fontSize');
    baseAttr.fontFamily = activeObject.get('fontFamily');
    baseAttr.lineHeight = activeObject.get('lineHeight');
    baseAttr.textAlign = activeObject.get('textAlign');
    baseAttr.underline = activeObject.get('underline');
    baseAttr.linethrough = activeObject.get('linethrough');
    baseAttr.charSpacing = activeObject.get('charSpacing');
    baseAttr.overline = activeObject.get('overline');
    baseAttr.fontStyle = activeObject.get('fontStyle');
    baseAttr.textBackgroundColor = activeObject.get('textBackgroundColor');
    baseAttr.fontWeight = activeObject.get('fontWeight');
  }
};

const handleFontStyle = (name) => {
  switch (name) {
    case 'fontWeight':
      changeFontWeight('fontWeight', baseAttr.fontWeight);
      break;
    case 'fontStyle':
      changeFontStyle('fontStyle', baseAttr.fontStyle);
      break;
    case 'underline':
      changeUnderline('underline', baseAttr.underline);
      break;
    case 'linethrough':
      changeLineThrough('linethrough', baseAttr.linethrough);
  }
};

// 加粗
const changeFontWeight = (key, value) => {
  const nValue = value === 'normal' ? 'bold' : 'normal';
  baseAttr.fontWeight = nValue;
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  activeObject && activeObject.set(key, nValue);
  canvasEditor.canvas.renderAll();
};

// 斜体
const changeFontStyle = (key, value) => {
  const nValue = value === 'normal' ? 'italic' : 'normal';
  baseAttr.fontStyle = nValue;
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  activeObject && activeObject.set(key, nValue);
  canvasEditor.canvas.renderAll();
};

// 中划
const changeLineThrough = (key, value) => {
  const nValue = value === false;
  baseAttr.linethrough = nValue;
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  activeObject && activeObject.set(key, nValue);
  canvasEditor.canvas.renderAll();
};

// 下划
const changeUnderline = (key, value) => {
  const nValue = value === false;
  baseAttr.underline = nValue;
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  activeObject && activeObject.set(key, nValue);
  canvasEditor.canvas.renderAll();
};

const selectCancel = () => {
  update?.proxy?.$forceUpdate();
};

onMounted(() => {
  // 获取字体数据
  getObjectAttr();
  canvasEditor.on('selectCancel', selectCancel);
  canvasEditor.on('selectOne', getObjectAttr);
  canvasEditor.canvas.on('object:modified', getObjectAttr);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectCancel', selectCancel);
  canvasEditor.off('selectOne', getObjectAttr);
  canvasEditor.canvas.off('object:modified', getObjectAttr);
});
</script>

<style scoped lang="less">
.font-style {
  font-size: 12px;
  font-weight: bold;
  padding: 0 5px;
  background-color: var(--background-primary-color);
  border-radius: 4px;
}
.text-align-item {
  font-size: 12px;
  font-weight: bold;
  padding: 0 5px;

  &:hover {
    svg {
      fill: var(--primary-color);
    }
  }

  svg {
    fill: var(--color-text-block);
  }
}
</style>
